// 样式化组件

import styled from "@emotion/styled";

const Child = styled.div`
  width: 200px;
  height: 200px;
  background: #333;
  color: #fff;
`;

// ??不生效
const Parent = styled.div`
  ${Child} {
    background: green;
    color: blue;
  }
`;

const Child1 = styled.div({
  background: "#666",
  color: "#fff",
});

// ??不生效
const Parent1 = styled.div({
  [Child]: {
    background: "green",
    color: "red",
  },
});

function App() {
  return (
    <div>
      <Child>Child</Child>
      <Parent>Parent Child</Parent>
      <Child1>Child</Child1>
      <Parent1>Parent Child</Parent1>
    </div>
  );
}

export default App;
